<template>
	<view>
		<view class="flex padding" v-for="(item,index) in cartList" :key="item.objectId">
			<view class="flex align-center">
				<text 
					class="iconfont icon-gouxuan margin-right"
					:class="item.isCheck?'text-yellow':'text-grey'"
					@click="handleCheck(index)"
				></text>
				<image class="poster margin-right" :src="item.img" mode=""></image>
			</view>
			<view class="flex justify-between info list">
				<view class="">
					{{item.name}}
					<view class="margin-tb-xs">{{item.french}}</view>
					￥{{item.list[item.dropIdx].price}}
				</view>
				<view class="flex flex-direction align-end">
					<view class="edit margin-bottom-xs" @click="handleEdit(item,index)">
						<text class="iconfont icon-bianji"></text>
					</view>
					{{item.list[item.dropIdx].spec}}
					 X 
					{{item.num}}
				</view>
			</view>
		</view>
		<view class="cu-bar foot bg-fff flex">
			<view class="flex flex-sub padding align-center">
				<text 
					class="iconfont icon-gouxuan margin-right-xs"
					:class="allInfo.allCheck?'text-yellow':'text-grey'"
					@click="handleAllCheck(allInfo.allCheck)"
				></text>全选
				<view class="margin-left">
					共计:{{allInfo.allPrice}}
				</view>
			</view>
			<view class="bg-yellow padding text-center color-fff">
				立即结算
			</view>
		</view>
		<cart-pop/>
	</view>
</template>

<script setup>
import {useStore} from 'vuex'
import { computed } from "vue";
const store = useStore()
const cartList = computed(()=>{
	return store.state.cart.cartList
})
const handleCheck = (idx)=>{
	store.commit('cart/cartCheckMut',idx)
}
// 全选
const allInfo = computed(()=>store.getters['cart/allInfo'])
const handleAllCheck = (bool)=>{
	store.commit('cart/cartAllCheckMut',bool)
}

//编辑
const handleEdit = (item,idx)=>{
	store.commit('cart/popDataMut',item) //显示弹窗数据
	store.commit('cart/editIdxMut',idx) //区分新增、编辑
	store.commit('cart/togglePopShow',true) //显示弹窗
}
</script>

<style lang="scss">
page{
	padding-bottom: 100upx;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.flex.align-end{
	min-width: 210upx;
}
// .icon-gouxuan{
// 	color: #e7e7e7;
// }
.cu-btn.lg{
	width: 50%;
}
.cover-cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 690upx;
	transform: translateY(-50%);
	border-radius: 10upx;
}
.drop{
	position: relative;
	.drop-list{
		width: 300upx;
		position: absolute;
		top: 60upx;
		right: 0;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 10;
		view:hover{
			background-color: #e6e6e6;
		}
	}
}
.foot{
	bottom:100upx
}
</style>
